import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/route/index.dart';
import 'package:gourmet/ui/shrink_wrap.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/styles.dart';
import 'package:gourmet/utils/tools.dart';

class SearchOrderController extends GetxController {
  List<String> tags = [
    '饺子',
    '咸骨粥饺子王',
    '隆江猪脚饭',
    '烤鱼',
    '猪杂粉汤',
    '周黑鸭',
    '酸辣粉',
    '麦当劳',
    '甜品',
    '烧鸭饭'
  ];
}

class SearchOrderPage extends GetView<SearchOrderController> {
  const SearchOrderPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removePadding(
      context: context,
      removeBottom: true,
      removeLeft: true,
      removeTop: true,
      removeRight: true,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF7f7),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(44 + Get.mediaQuery.padding.top),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              padding: EdgeInsets.only(top: Get.mediaQuery.padding.top),
              height: 44 + Get.mediaQuery.padding.top,
              color: Colors.white,
              child: Row(
                children: [
                  GestureDetector(
                    onTap: Get.back,
                    child: Container(
                      width: 40,
                      alignment: Alignment.center,
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 18,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ),
                  ),
                  Expanded(
                    child: Center(
                      child: TextField(
                        cursorHeight: 20,
                        cursorWidth: 3,
                        cursorRadius: const Radius.circular(2),
                        cursorColor: HexColor(ColorsUtils.colorFf64),
                        decoration: InputDecoration(
                          fillColor: HexColor(ColorsUtils.colorF5f5),
                          hintText: '请输入商家或商品名称',
                          hintStyle: StylesUtils.customTextStyle(
                              color: ColorsUtils.color9999),
                          isCollapsed: true,
                          filled: true,
                          isDense: true,
                          prefixIcon: Icon(
                            CupertinoIcons.search,
                            color: ColorsUtils.parseColorFromHexString(
                                ColorsUtils.color9999),
                            size: 20.w,
                          ),
                          contentPadding: const EdgeInsets.only(top: 5),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(17.5),
                            borderSide: BorderSide.none,
                          ),
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(17.5),
                            borderSide: BorderSide.none,
                          ),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(17.5),
                            borderSide: BorderSide.none,
                          ),
                          constraints: const BoxConstraints.expand(
                              width: 270, height: 35),
                        ),
                      ),
                    ),
                  ),
                  InkWell(
                    onTap: () {
                      Get.toNamed(Routes.searchOrderResult);
                    },
                    child: Container(
                      width: 60,
                      alignment: Alignment.center,
                      child: Text(
                        '搜索',
                        softWrap: true,
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.color0000,
                            fontSize: StylesUtils.fontSize16),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                margin: const EdgeInsets.only(top: 15),
                padding:
                    const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
                color: Colors.white,
                child: ListBody(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '历史搜索',
                          style: StylesUtils.customTextStyle(
                              fontSize: StylesUtils.fontSize15,
                              fontWeight: FontWeight.w700,
                              color: ColorsUtils.color0000),
                        ),
                        GestureDetector(
                          onTap: () {},
                          child: Icon(
                            CupertinoIcons.trash,
                            size: 15,
                            color: HexColor(ColorsUtils.color9999),
                          ),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: ShrinkWrap(
                        maxLines: 10,
                        spacing: 10,
                        runSpacing: 15,
                        children: controller.tags
                            .map((str) => Builder(builder: (context) {
                                  final style = StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color0000,
                                      fontWeight: FontWeight.normal);
                                  double width = ToolsUtils.calculateTextWidth(
                                      value: str, style: style);
                                  return GestureDetector(
                                    onTap: () {
                                      Get.toNamed(Routes.searchOrderResult);
                                    },
                                    child: Container(
                                      constraints: BoxConstraints.expand(
                                          width: width + 20, height: 30),
                                      alignment: Alignment.center,
                                      decoration: BoxDecoration(
                                          color:
                                              HexColor(ColorsUtils.colorF9f9),
                                          borderRadius:
                                              BorderRadius.circular(15)),
                                      child: Text(
                                        str,
                                        style: style,
                                      ),
                                    ),
                                  );
                                }))
                            .toList(),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
